<script>
import { h } from "vue";
export default {
  data() {
    return {
      count: 4,
    };
  },
  /**
   * 注意：使用箭头函数会导致this访问失败：render:() => {
   * 箭头函数的this对象指向的不是当前组件
   * 因为箭头函数没有自己的作用域，绑定的是父级作用域的上下文，
   * 如果使用箭头函数，那么在获取data里面的数据的时候，this指向window导致访问失败
   */

  render() {
    return h(
      // 第一个参数，声明元素类型
      "div",
      //   第二个参数，声明元素的属性，可以理解为HTML文件中可以写在标签上的属性
      {
        attrs: {
          id: "hdiv",
        },
        innerHTML: "hello h",
        style: {
          color: "red",
        },
        onclick: () => {
          alert(this.count);
        },
      },
      //   第三个参数
      [h("div")]
    );
  },
};
</script>
